<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>个人办公</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>便签信息列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="25"><!--gutter 间隙 col:列宽 --> 
              <el-col :span="10">
                  <el-input  placeholder="请输入搜索内容"  clearable >
                        <el-button slot="append" icon="el-icon-search"  type="button" ></el-button>
                  </el-input>
              </el-col>
              <span>
                    <el-button type="primary" icon="el-icon-check" @click="addChatINfo" >增加</el-button>
                    <el-button type="success"  icon="el-icon-edit" @click="updateChatINfo">修改</el-button>
                    <el-button  type="danger"  icon="el-icon-delete">删除</el-button>
              </span>
            </el-row>
            <div>
                <el-table  style="width:100%"  border stripe>
                    <el-table-column>
                        <template >
                            <el-checkbox ></el-checkbox> 
                　　　　　　　<el-radio ></el-radio> 
                        </template>
                    </el-table-column>
                    <el-table-column class="chat_id"   label="用户id"> </el-table-column>
                    <el-table-column class="chat_cont"   label="内容"> </el-table-column>
                    <el-table-column class="chat_time"    label="创建时间"> </el-table-column>
                </el-table>
            </div>
        </el-card>
        <!-- 添加便签内容-->
         <el-dialog title="添加便签信息" :visible.sync="addDialogVisible" width="50%" >
             <el-form  label-width="70px">
                 内容:<el-input type="textarea" :rows="6" v-model="textForm"></el-input>
            </el-form>
            <span slot="footer" class="dialog-fotter" >
                <el-button type="primary" >确定</el-button>
                <el-button  @click="addDialogVisible=false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            textForm:"",
                addDialogVisible:false
        }
    },
    methods:{
        addChatINfo(){
           this.$message.info("添加便签内容......")
           this.addDialogVisible = true
        },
        updateChatINfo(){
            this.$message.info("修改便签内容......")
        }
    }
    
}
</script>
<style lang="less" scoped>
 .el-form{
        margin-top: 50px;
        margin-top: -0.5rem;
        display: absolute;
        background-color: #ffffff;
        .el-form-item{
            margin: auto;
            display: flex;
            width: 100%;
            padding:0px;
            text-align: center;
            border:1px solid rgb(202, 193, 193);
            .el-checkbox{
                position:relative;
                padding:0px;
                width:25px;
                height:25px;
                line-height:25px;
            }
        }
 }
 .el-breadcrumb{//面包屑样式
    margin-bottom: 15px;
    font-size: 12px;
}
.el-card{/* 卡片区!important 提高样式级别  */
    box-shadow: 0 1px rgba(207, 161, 10, 0.15) !important;
}
.chat_id{
    width: 20px;
}
</style>